<!DOCTYPE html>
<html>

    {include file='public/header'}
    <style>
        .layui-form-switch{
            background-color: red;
            border-color: red;
        }
        .layui-form-switch em{
            color:#fff!important;
        }
        .layui-form-switch i{
            background-color: #fff;
        }
    </style>
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="javascript:void(0)">首页</a>
                <a href="javascript:void(0)">用户管理</a>
                <a>
                    <cite>管理员列表</cite>
                </a>
            </span>
            <a class="layui-btn layui-btn-small" id="reload" title="刷新">
                <i class="layui-icon" style="line-height:30px">
                    <i class="iconfont">&#xe6aa;</i>
                </i>
            </a>
        </div>
        <div class="x-body">
            <table id="admin" lay-filter="admin"></table>
        </div>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加管理员</button>
            </div>
        </script>
        <script
            type="text/html" id="switchTpl">
            <!-- 这里的 checked 的状态只是演示 -->
            
            <input type="checkbox"  name="sex" value="{{d.id}}" lay-skin="switch" lay-text="开启|禁用" lay-filter="sexDemo" {{ d.status ===1 ? 'checked' : '' }}>
            <!-- <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="开启|禁用"  lay-filter="switch_filter" {{ d.status ==1 ? 'checked' : '' }}> -->
        </script>
        <script type="text/html" id="tbBar">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script>
            let params = {
                elem: '#admin',
                toolbar: '#toolbarDemo',
                url: '/admin/admin/list',
                // 数据接口
                // 数据接口
                id: 'admin',
                page: true,
                cols: [
                    [
                        {
                            // 表头
                            field: 'id',
                            title: 'ID',
                            align: 'center',
                            width: 80,
                            align: 'center'
                        },
                        {
                            field: 'profile_photo',
                            title: '头像',
                            width: 100,
                            align: 'center',
                            templet: function (d) {
                                if (d.profile_photo) {
                                    return `<div class="layer-photos" style="cursor:pointer;height: 100%;">
                                    <img onclick="showimg(this)" style="height: 100%;" src=` + d.profile_photo + ` alt="">
                                </div>`;
                                } else {
                                    return ``
                                }
                            }
                        },
                        {
                            field: 'name',
                            title: '用户名称',
                            align: 'center'
                        },
                        {
                            field: 'rule_name',
                            title: '角色名称',
                            align: 'center'
                        }, {
                            field: 'company_name',
                            title: '合作公司',
                            align: 'center'
                        }, {
                            field: 'partner_name',
                            title: '版权方',
                            align: 'center'
                        }, {
                            field: 'fans_count',
                            title: '粉丝总数',
                            align: 'center'
                        }, {
                            field: 'is_display',
                            title: '状态',
                            width: 100,
                            templet: '#switchTpl',
                            unresize: true,
                             align: 'center'
                        }, {
                            toolbar: '#tbBar',
                            title: '操作',
                            width: 150,
                            align: 'center'
                        }
                    ]
                ]
            }
            tableList(params)


            layui.use('table', function () {
                var table = layui.table;
                table.on('toolbar(admin)', function (obj) {
                    var event = obj.event;
                    if (event === 'add') {
                        x_admin_show('添加管理员', './info.html', 650, 600);
                    }
                });
                table.on('tool(admin)', function (obj) {
                    var event = obj.event;
                    if (event === 'del') {
                        DeleteAjax('/admin/admin/delete', {
                            id: obj.data.id
                        }, 'admin')
                    } else if (event === 'edit') {
                        x_admin_show('编辑管理员', `./info.html?id=${
                            obj.data.id
                        }`, 650, 600);
                    }
                });

                form.on('switch(sexDemo)', function (obj) { // 根据业务判断是开启还是关闭
                       let getRechargeType = new Promise((resolve) => {
                        Ajax('/admin/admin/setStatus', {id:this.value,status:obj.elem.checked?1:2}).then(result => {
                            resolve(result.data)
                            // console.log(result);
                            if(result.code===200){
                                layer.msg('修改成功!');
                            }
                            
                        });
                    })

                   
                });
            });
        </script>
    </body>

</html>
